const form = document.querySelector('#formRegister')
// 表单提交事件监听器
form.addEventListener(
  'submit',
  function (e) {
    e.preventDefault()
    let rt = validEmail() & validFname() & validLname() & validPass() & validRPass()
    if (rt) {
      location = 'register_success.html'
    }
  },
  false
)

// 验证密码
function validPass() {
  let input = document.getElementById('pass')
  let v = input.value.trim()
  let span = input.nextElementSibling
  if (!v) {
    span.innerHTML = '密码不能空'
    span.style.color = 'red'
    return false
  }
  if (v.length < 6) {
    span.innerHTML = '密码长度不能小于6位'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = ''
  span.style.color = 'black'
  return true
}
// 验证重复密码
function validRPass() {
  let input = document.getElementById('rpass')
  let v = input.value.trim()
  let span = input.nextElementSibling
  let rt = validPass()
  if (!rt) {
    span.innerHTML = '密码不正确'
    span.style.color = 'red'
    return false
  }
  let v1 = document.getElementById('pass').value
  if (v1 !== v) {
    span.innerHTML = '两次密码不一致'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = ''
  span.style.color = 'black'
  return true
}

// 验证名字
function validFname() {
  let input = document.getElementById('fname')
  let v = input.value.trim()
  let span = input.nextElementSibling
  // 验证非空
  if (!v) {
    span.innerHTML = '名字不能空'
    span.style.color = 'red'
    return false
  }
  // 验证不能有数字
  // let reg = /\d/g
  // let list = v.match(reg) // 提取数字，如果数字有list=['1','2',...],否则list=null
  // console.log(list)
  // if (list && list.length > 0) {
  //   // 说明数字存在
  //   span.innerHTML = '名字不能有数字'
  //   span.style.color = 'red'
  //   return false
  // }
  let reg = /^[^\d]+$/
  if (!reg.test(v)) {
    span.innerHTML = '名字不能有数字'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = ''
  span.style.color = 'black'
  return true
}

// 验证姓氏
function validLname() {
  let input = document.getElementById('lname')
  let v = input.value.trim()
  let span = input.nextElementSibling
  // 验证非空
  if (!v) {
    span.innerHTML = '姓氏不能空'
    span.style.color = 'red'
    return false
  }
  // 验证不能有数字
  // let reg = /\d/g
  // let list = v.match(reg)
  // console.log(list)
  // if (list && list.length > 0) {
  //   // 说明数字存在
  //   span.innerHTML = '姓氏不能有数字'
  //   span.style.color = 'red'
  //   return false
  // }
  let reg = /^[^\d]+$/
  if (!reg.test(v)) {
    span.innerHTML = '姓氏不能有数字'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = ''
  span.style.color = 'black'
  return true
}

// 验证邮箱
function validEmail() {
  let input = document.getElementById('email')
  let v = input.value.trim()
  let span = input.nextElementSibling
  // 判断空
  if (!v) {
    span.innerHTML = '邮箱不能空'
    span.style.color = 'red'
    return false
  }
  // 定义邮箱正则
  let reg = /^\w+@[a-z\d]{2,}(\.[a-z]{2,3}){1,2}$/
  // 96243611@qq.com
  /*
    \w 数字字母下划线
    + 出现1到多次
    @ 就是@符号
    [a-z\d]{2,} 数字字母出现至少2次
    \. 匹配一个点符号
    [a-z]{2,3} 字母出现2-3次
    (\.[a-z]{2,3}) 点和字母作为整体出现
     (\.[a-z]{2,3}){1,2} 点和字母作为整体出现1-2次
  */
  if (!reg.test(v)) {
    span.innerHTML = '邮箱不合法'
    span.style.color = 'red'
    return false
  }
  span.innerHTML = ''
  span.style.color = 'black'
  return true
}

// 使用其他元素不能使用id name 为reset的元素
const resets = document.querySelector('#resets')
resets.addEventListener(
  'click',
  function () {
    // form表单重置
    form.reset()
  },
  false
)
